<template>
  <div class="tableList">
    <!-- 直接使用vuex的数据 -->
    <el-table
      :data="$store.state.userStore.userList"
      border
      style="width: 100%"
    >
      <!-- <el-table-column type="index"> </el-table-column> -->
      <!-- <el-table-column type="selection"> </el-table-column>
      <el-table-column type="expand"> </el-table-column> -->
      <el-table-column prop="mg_name" label="用户名"> </el-table-column>
      <el-table-column prop="mg_email" label="邮箱"> </el-table-column>
      <el-table-column prop="mg_mobile" label="电话"> </el-table-column>
      <el-table-column prop="role_name" label="角色"> </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.mg_state"
            :active-value="1"
            :inactive-value="0"
            @change="stateChange(scope.row)"
            v-has="159"
            :disabled="!$store.state.btn_permission.includes('159')"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="170px" align="center">
        <template slot-scope="scope">
          <!-- scope.$index -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="showEditDialog(scope.row)"
            v-has="133"
            :disabled="!$store.state.btn_permission.includes('133')"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="del(scope.row)"
            v-has="132"
            :disabled="!$store.state.btn_permission.includes('132')"
          ></el-button>
          <el-button
            type="warning"
            icon="el-icon-setting"
            @click="showRoleDialog(scope.row)"
            v-has="137"
            :disabled="!$store.state.btn_permission.includes('137')"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分配角色dialog -->
    <dialog-role
      :mg_id="mg_id"
      :mg_name="mg_name"
      :role_name="role_name"
      :roleList="roleList"
    ></dialog-role>
    <!-- 编辑dialog -->
    <dialog-edit-user></dialog-edit-user>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { getRoleList } from "@/api/role";
import DialogRole from "./Dialog/DialogRole";
import DialogEditUser from "./Dialog/DialogEditUser.vue";

export default {
  name: "tableList",
  data() {
    return {
      dialogRoleVisible: false,
      dialogEditUserVisible: false,
      mg_id: 0,
      mg_name: "",
      role_name: "",
      select_roleName: "",
      roleList: [],
    };
  },
  components: { DialogRole, DialogEditUser },
  created() {
    //直接调用vuex的action请求数据
    this.get_user_list();
  },
  computed: {
    ...mapState("userStore", ["totalNum", "pageNum"]),
  },
  methods: {
    //引入actions(代替 this.$store.userStpre.dispatch('get_user_list'))
    ...mapActions("userStore", ["get_user_list", "update_user_info"]),
    stateChange(row) {
      // console.log(row.mg_id);
      //发送请求完成更改
      this.update_user_info({ mg_id: row.mg_id, isFormData: false });
    },
    showEditDialog(row) {
      this.dialogEditUserVisible = true;
      this.$bus.$emit("visibleEditUserVisible", {
        row: row,
        flag: this.dialogEditUserVisible,
      });
    },
    del(row) {
      //逻辑删除
      // console.log(row.mg_id, row.mg_del);

      this.$confirm("删除当前用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //更改mg_del = 1
          Object.keys(this.$store.state.userStore.userList).some((key) => {
            if (this.$store.state.userStore.userList[key].mg_id === row.mg_id) {
              this.$store.state.userStore.userList[key].mg_del = 1;
              return true;
            }
          });
          //逻辑删除
          this.update_user_info({ mg_id: row.mg_id, isFormData: false });
          setTimeout(() => {
            //判断的时候已经逻辑删除 但是还未更新state的数据 如果出现如4%3=1 且 页码>1如2 说明需currentPage-1
            if (
              this.totalNum % this.pageNum === 1 &&
              this.$store.state.userStore.currentPage > 1
            ) {
              this.$store.state.userStore.currentPage -= 1;
            }
            this.get_user_list();
          }, 300);
          //提示信息
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除!",
          });
        });
    },
    showRoleDialog(row) {
      //显示dialog 并获取数值
      this.dialogRoleVisible = true;
      this.$bus.$emit("visibleRole", this.dialogRoleVisible);
      //获取点击的行信息
      this.mg_id = row.mg_id;
      this.mg_name = row.mg_name;
      this.role_name = row.role_name;
      //调用接口获取角色列表
      getRoleList().then(
        (res) => {
          // console.log(res.data);
          if (res.data.status === 200) {
            return (this.roleList = res.data.data);
          }
          this.$message.error("获取角色列表失败!");
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
};
</script>

<style  scoped>
.tableList {
  margin: 0 20px;
}
.el-button {
  padding: 10px 15px;
  margin-left: 2px;
}
</style>
